<template>
	<view class="orders" :class="orderList.length==0?'empty':''">
		<block v-if="orderList.length>0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in orderList" :key="index" cc
					v-if="FormData.orderStatus==item.orderStatus " @tap.prevent="orderDeatils(item)">
					<view class="item" v-if="item.isComment==1">
						<!-- disabled -->
						<!-- 	<block v-if="item.orderStatus=='-2'&&item.djsTime">
							<uCountDown @finish="finish(item)" :djsTime="item.djsTime" />
						</block> -->
						<block v-if="item.orderStatus=='-2'&&item.djsTime">
							<uCountDown class="status s2" @finish="finish(item)" :djsTime="item.djsTime" />
						</block>
						<block v-else>
							<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
							<text class="status s3" v-if="item.orderStatus=='5'">已退款</text>
							<text class="status s2" v-if="item.orderStatus=='-2'">待支付</text>
							<text class="status disabled" v-if="item.orderStatus=='1'">
								{{item.orderType==201?'未核销':'待入住'}}</text>
							<text class="status s3"
								v-if="item.orderStatus=='2'||item.orderStatus=='3'">{{item.orderType==201?'已核销':'已使用'}}</text>
							<text class="status s3" v-if="item.orderStatus=='4'">已取消</text>
						</block>
						<view class="head">
							<image src="@/static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
							<image src="@/static/my/jd_ms.png" mode="" v-else></image>
							<text v-if="item.orderType=='201'"> 酒店民宿餐饮</text>
							<text v-else>酒店民宿</text>
						</view>
						<view class="mid">
							<view class="name" :class="item.orderStatus=='-3'?'disabled':''">
								{{item.orderType!='201'? item.homestayName:item.comboName}}
							</view>
							<view class=" date" v-if="item.orderType=='201'">{{ item.comboType=='1'?'包桌':'按人均'}}</view>
							<view class=" date" v-else>{{ item.houseBaseName}}</view>
							<view class="des" v-if="item.orderType=='201'">
								{{item.repastTime}}
							</view>
							<view class="des" v-else> {{item.arriveDate}} 至 {{item.leaveDate}}
								{{item.num}}晚/{{item.checkInRooms}}间
							</view>
						</view>
						<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.realityPay}}</view>
						<view class="btns">
							<template v-if="item.orderStatus==1">
								<view @click.stop="GoRefund(item)">
									取消
								</view>
								<!-- 	<view @click.stop="GoRefund(item)">
									申请退订
								</view> -->
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>

							<template v-if="item.orderStatus==-2">
								<view @click.stop="toStatus0(item)">
									取消
								</view>
								<view @click.stop="GoToPay(item)" style="color: #fff; background-color: #FF4141; ">
									去支付
								</view>
							</template>


							<template v-if="item.orderStatus==3||item.orderStatus==2">
								<view @click.stop="deleteOrder(item)">
									删除
								</view>
								<view @click.stop="toEvaluate(item)" v-if="item.isComment==1">
									评价
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>
							<template v-if="item.orderStatus==5||item.orderStatus==4">
								<view @click.stop="deleteOrder(item)">
									删除
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>
							<template v-if="item.orderStatus==-1">
								<view @click.stop="GoRefund(item)">
									取消
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>

						</view>
					</view>
				</u-list-item>
				<view v-else @tap.prevent="orderDeatils(item)">
					<view class="item">
						<block v-if="item.orderStatus=='-2'&&item.djsTime">
							<uCountDown class="status s2" @finish="finish(item)" :djsTime="item.djsTime" />
						</block>
						<block v-else>
							<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
							<text class="status s3" v-if="item.orderStatus=='5'">已退款</text>
							<text class="status s2" v-if="item.orderStatus=='-2'">待支付</text>
							<text class="status disabled" v-if="item.orderStatus=='1'">
								{{item.orderType==201?'未核销':'待入住'}}</text>
							<text class="status s3"
								v-if="item.orderStatus=='2'||item.orderStatus=='3'">{{item.orderType==201?'已核销':'已使用'}}</text>
							<text class="status s3" v-if="item.orderStatus=='4'">已取消</text>
						</block>

						<view class="head">
							<image src="@/static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
							<image src="@/static/my/jd_ms.png" mode="" v-else></image>
							<text v-if="item.orderType=='201'"> 酒店民宿餐饮</text>
							<text v-else>酒店民宿</text>
						</view>

						<view class="mid">
							<view class="name" :class="item.orderStatus=='-3'?'disabled':''">
								{{item.orderType!='201'? item.homestayName:item.comboName}}
							</view>
							<view class=" date" v-if="item.orderType=='201'">{{ item.comboType=='1'?'包桌':'按人均'}}</view>
							<view class=" date" v-else>{{ item.houseBaseName}}</view>

							<!-- <view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view> -->
							<view class="des" v-if="item.orderType=='201'">
								{{item.repastTime}}
							</view>
							<view class="des" v-else> {{item.arriveDate}} 至 {{item.leaveDate}}
								{{item.num}}晚/{{item.checkInRooms}}间
							</view>

						</view>
						<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.realityPay}}</view>

						<view class="btns">

							<template v-if="item.orderStatus==1">
								<!-- 	<view @click.stop="toStatus0(item)">
									取消
								</view> -->
								<view @click.stop="GoRefund(item)">
									取消
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>

							<template v-if="item.orderStatus==-2">
								<view @click.stop="toStatus0(item)">
									取消
								</view>
								<view @click.stop="GoToPay(item)" style="color: #fff; background-color: #FF4141;">
									去支付
								</view>
							</template>
							<template v-if="item.orderStatus==3||item.orderStatus==2">
								<view @click.stop="deleteOrder(item)">
									删除
								</view>
								<view @click.stop="toEvaluate(item)" v-if="item.isComment==1">
									评价
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>
							<template v-if="item.orderStatus==5||item.orderStatus==4">
								<view @click.stop="deleteOrder(item)">
									删除
								</view>

								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>
							<template v-if="item.orderStatus==-1">
								<view @click.stop="GoRefund(item)">
									取消
								</view>
								<view @click.stop="applyAfterSales(item)">
									再次预订
								</view>
							</template>

						</view>
					</view>
				</view>
			</u-list>
		</block>
		<block v-else>
			<NoData style="margin: 0 100%;" />
		</block>
		<!-- 取消民宿弹框 -->
		<u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirm" @cancel='cancel'></u-modal>
		<!-- 取消餐饮弹框 -->
		<u-modal :show="showAgreees" :title="title" :content='contentes' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirm" @cancel='cancel'></u-modal>

		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				mysearch: '',
				orderList: [],
				orderStatus: 0,
				FormData: {
					openId: '',
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					orderStatus: '',
				},
				form: {
					initiator: 2,
					orderCode: '',
					orderStatus: ''
				},
				pageIndex: 1,
				pageCount: 10,
				isOver: false,
				ocfg: this.$ocfg,
				// orderState: ''
				title: '温馨提示',
				content: '您确定要取消吗？确定取消将不可撤回，再次预订可能因为没有房间，影响后续行程！',
				contentes: '您确定要取消吗？确定取消将不可撤回，再次预订可能影响您用餐！',
				contented: '您确定要删除吗？确定删除将不可撤回！',
				showAgree: false,
				showAgreees: false,
				showdelete: false,
				orderType: null,
				delId: null,
			}
		},
		methods: {
			//删除
			deleteOrder(item) {
				this.showdelete = true
				this.delId = item.id

			},
			scrolltolower() {
				this.getList();
			},
			// 评价
			toEvaluate(item) {
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise3?obj=' + JSON.stringify(item),
				});
			},
			// 再次预定
			applyAfterSales(item) {
				// 初始化
				let arriveDate = new Date().Format('yyyy-MM-dd')
				let mt = new Date().setDate(new Date().getDate() + 1);
				let leaveDate = new Date(mt).Format('yyyy-MM-dd')

				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" +
						JSON.stringify([{
							homestayId: item.homestayId,
							name: '',
							arriveDate: arriveDate, //	到达时间(yyyy-MM-dd)
							leaveDate: leaveDate, //离开时间(yyyy-MM-dd)
						}, ]),
				});
			},
			// 退款
			GoRefund(item) {
				if (item.orderType == 201) {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/HotelDiningDetails?orderId=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/index?orderId=' + item.id
					})
				}
			},
			// 去支付
			GoToPay(item) {
				if (item.orderType == 201) {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/HotelDiningDetails?orderId=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/index?orderId=' + item.id
					})
				}
			},
			// 取消订单
			toStatus0(item) {
				this.form.orderCode = item.orderCode
				this.form.orderStatus = item.orderStatus
				this.orderType = item.orderType
				if (this.orderType == 201) {
					this.showAgreees = true
				} else {
					this.showAgree = true
				}
				// this.getList()
			},
			// 确定删除
			confirmed() {
				let id = this.delId
				this.$api.get(`/api/hotel/delOrder/${id}`).then((res) => {
					if (res.data.code == 0) {
						this.showdelete = false
						setTimeout(() => {
							this.$showToast('删除成功');
							setTimeout(() => {
								this.init();
							}, 500)
						}, 500)
					} else {
						this.$showModal(res.data.msg);
						this.showdelete = false
						// setTimeout(() => {
						// 	this.init();
						// }, 500)
					}
				})
			},
			//确定
			confirm() {
				// this.agree = true
				// this.form.orderCode = this.orderList.orderCode
				// this.form.status = this.orderList.orderStatus
				if (this.orderType == 201) {
					this.showAgreees = false
					this.$api.post('/api/repast/cancelRepastOrder', this.form).then(res => {
						// uni.navigateBack(1)
						if (res.data.code == 0) {
							this.init()
						} else this.$showModal(res.data.msg);

					})
				} else {
					this.showAgree = false
					this.$api.post('/api/hotel/cancelOrder', this.form).then(res => {
						if (res.data.code == 0) {
							this.init()
						} else this.$showModal(res.data.msg);
					})
				}
			},
			// 取消
			cancel() {
				this.showAgree = false
				this.showAgreees = false
				this.showdelete = false
			},
			init() {
				this.FormData.page = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			changeStatus(index) {
				if (index === 0) this.FormData.orderStatus = '';
				else if (index === 1) this.FormData.orderStatus = '-2'
				else if (index === 2) this.FormData.orderStatus = '1';
				else if (index === 3) this.FormData.orderStatus = '2';
				else if (index === 4) this.FormData.orderStatus = '5';
				// else this.FormData.status = '0,1,-1,2,-2,-3,3,4,5,6,7,8,9,10,11';
				this.init();
			},
			orderDeatils(item) {
				if (item.orderType == 201) {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/HotelDiningDetails?orderId=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pagesTrip/hotel/orderDetails/index?orderId=' + item.id
					})
				}
			},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			},
			search(keyword) {
				this.mysearch = keyword;
				this.FormData.page = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			getList() {
				// let this = this;
				this.FormData.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
				this.$api.get('/api/hotel/getCenterOrderPage', {
					openId: this.FormData.openId,
					orderStatus: this.FormData.orderStatus,
					page: this.FormData.page,
					limit: this.FormData.limit,
					searchBox: this.mysearch,
				}, true, true).then(res => {
					if (res.data.code === 0) {
						this.FormData.page++;
						let {
							list
						} = res.data.data;
						this.orderList = [...this.orderList, ...list];
						this.orderList.forEach(o => {
							if (o.orderStatus == '-2') {
								let diffMS = Date.parse(new Date()) - Date.parse(new Date(o.createDate));
								if (diffMS < this.$gqTime) o.djsTime = this.$gqTime - diffMS -
									1000; //提前一秒，便于取消刷新
							}
						})
					} else this.$showModal(res.data.msg);
				})
			},
			finish(item) {
				this.form.orderCode = item.orderCode;
				this.form.orderStatus = item.orderStatus;
				this.orderType = item.orderType;
				let url = this.orderType == 201 ? '/api/repast/cancelRepastOrder' : '/api/hotel/cancelOrder';
				this.$api.post(url, this.form).then(res => {
					if (res.data.code == 0) {
						setTimeout(() => {
							this.init();
						}, 500)
					} else this.$showModal(res.data.msg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.orders {
		padding-top: 20rpx;

		&.empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item {
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			padding: 36rpx 24rpx 0;
			position: relative;
			box-sizing: border-box;

			.status {
				right: 24rpx;
				top: 40rpx;
				font-size: 26rpx;
				color: #AAA;
				position: absolute;

				&.s2 {
					color: #FEB000;
				}

				&.s3 {
					color: #999999;
				}
			}

			.head {
				color: #111;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}

				text {
					vertical-align: middle;
				}
			}

			.mid {
				padding: 30rpx 50rpx 40rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.name {
					font-size: 32rpx;
				}

				.date {
					margin: 30rpx 0 24rpx;
					color: #AAAAAA;
				}

				.des {
					color: #AAAAAA;
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					// margin: 24rpx 0 0 24rpx;
					margin: 24rpx 0 24rpx 24rpx;

					width: 148rpx;
					height: 56rpx;
					// border: 1rpx solid #EFEFEF;
					border-radius: 16rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: Regular;
					color: #333333;
					background-color: #F6F6F6;
				}
			}

			.price {
				position: absolute;
				right: 24rpx;
				bottom: 144rpx;
				font-size: 32rpx;
				color: #111;
				font-weight: 600;
			}
		}
	}

	.disabled {
		color: #333333 !important
	}

	.ml12 {
		height: 56rpx;
		width: 148rpx;
		line-height: 56rpx;
		display: inline-block;
		margin-left: 24rpx;
	}
</style>